<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>500</title>
            <style>
                body {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    background-color: #f5f5f5;
                    color: #333;
                    margin: 0;
                    padding: 0;
                }
                .container {
                    max-width: 800px;
                    margin: 50px auto;
                    padding: 20px;
                    background-color: #fff;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
                h1 {
                    color: #0078D7;
                }
                pre {
                    background-color: #f0f0f0;
                    padding: 10px;
                    overflow-x: auto;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>500</h1>
                <p><strong>Request URL:</strong> {{ request.path }}</p>
                <p><strong>Request Headers:</strong></p>
                <pre>{{ request.headers }}</pre>
                <p><strong>Error Details:</strong></p>
                <pre>{{ error }}</pre>
                <p><strong>Traceback:</strong></p>
                <pre>{{ traceback }}</pre>
            </div>
        </body>
        </html>